<template>
  <view class="component-box" :style="[outModuleCss]" v-if="goodsList.length">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="diy-product" :class="!showModuleName ? 'add-padding' : ''">
      <view class="section-header" v-if="showModuleName" @click="skipToLink">
        <view class="module-header" v-if="showModuleName">
          <view class="module-name" :style="[moduleNameCss]">{{
            showModuleName ? moduleName : ""
          }}</view>
          <view
            class="more"
            :style="[moduleMoreCss]"
            v-if="propsData.params.showMoreText"
          >
            <span>{{ propsData.params.moreText }}</span>
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
        <view :style="[heaerBgCss]" class="module-bg"></view>
      </view>
      <view class="section-body">
        <!-- 样式1 -->
        <defaultTem
          v-if="styleType == 1"
          :propsData="propsData"
          :goodsList="goodsList"
          :goodsItemSpace="goodsItemSpace"
          @clickBuyBtn="clickBuyBtn"
          @toGoodDetail="toGoodDetail"
          @scrollToEnd="scrollToEnd"
        ></defaultTem>
        <!-- 样式2 -->
        <flexTwoTem
          v-if="styleType == 2"
          :propsData="propsData"
          :goodsList="goodsList"
          :goodsItemSpace="goodsItemSpace"
          @clickBuyBtn="clickBuyBtn"
          @toGoodDetail="toGoodDetail"
          @scrollToEnd="scrollToEnd"
        ></flexTwoTem>
        <!-- 样式3 -->
        <columnTem
          v-if="styleType == 3"
          :propsData="propsData"
          :goodsList="goodsList"
          :goodsItemSpace="goodsItemSpace"
          @clickBuyBtn="clickBuyBtn"
          @toGoodDetail="toGoodDetail"
          @scrollToEnd="scrollToEnd"
        ></columnTem>
        <!-- 样式4 -->
        <flexGroupTem
          v-if="styleType == 4"
          :propsData="propsData"
          :goodsList="goodsList"
          :goodsItemSpace="goodsItemSpace"
          @clickBuyBtn="clickBuyBtn"
          @toGoodDetail="toGoodDetail"
          @scrollToEnd="scrollToEnd"
        ></flexGroupTem>
        <!-- 样式5 -->
        <slideTem
          v-if="styleType == 5"
          :propsData="propsData"
          :goodsList="goodsList"
          :goodsItemSpace="goodsItemSpace"
          @clickBuyBtn="clickBuyBtn"
          @toGoodDetail="toGoodDetail"
          @scrollToEnd="scrollToEnd"
        ></slideTem>
      </view>
    </view>
    <!-- 添加购物车数组 -->
    <goodsAddCart :good="goodsOfAdd"></goodsAddCart>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import goodsAddCart from "../goodsAddCart/index.vue";
import defaultTem from "../productShow/templates/defaultTem.vue";
import flexTwoTem from "../productShow/templates/flexTwo.vue";
import columnTem from "../productShow/templates/column.vue";
import flexGroupTem from "../productShow/templates/flexGroup.vue";
import slideTem from "../productShow/templates/slide.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    loadMoreProductClassify: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    goodsAddCart,
    defaultTem,
    flexTwoTem,
    columnTem,
    flexGroupTem,
    slideTem,
  },
  mixins: [diyMixin], //混入文件
  watch: {
    loadMoreProductClassify(val) {
      if (val) {
        this.scrollToEnd();
      }
    },
  },
  data() {
    return {
      goodsList: [],
      selectArr: [],
      page: 1,
      pageSize: 10,
      goodsOfAdd: {}, // 添加到购物车的商品
      row_count: 0,
    };
  },
  computed: {
    styleType() {
      return this.propsData.params.styleType;
    },
    moduleName() {
      return this.propsData.params.moduleName;
    },
    classifyId() {
      return this.propsData.params.classifyData;
    },
    selectData() {
      return this.propsData.params.selectData;
    },
    showBuyBtn() {
      return this.propsData.params.showBuyBtn;
    },
    showPrice() {
      return this.propsData.params.showPrice;
    },
    showSales() {
      return this.propsData.params.showSales;
    },
    showModuleName() {
      return this.propsData.params.showModuleName;
    },
    goodsItemSpace() {
      let out = this.propsData.params.goodsItemOutSpace || "0";
      let inner = this.propsData.params.goodsItemInnerSpace || "0";
      let styleType = this.propsData.params.styleType || 1;
      let css = {};
      out = out * 2;
      inner = inner * 2;
      if (out) {
        if (styleType == 1) {
          css["margin"] = `0 0 ${out}rpx 0`;
        }
        if (styleType == 3) {
          css["margin"] = `0 ${out}rpx ${out}rpx ${out}rpx`;
        }
        if (styleType == 2 || styleType == 4) {
          css["margin"] = `0 ${out}rpx ${out}rpx 0`;
        }
        if (styleType == 5) {
          css["margin"] = `0 ${out}rpx 0 0`;
        }
      }
      if (inner) {
        css["padding"] = `${inner}rpx`;
      }
      return css;
    },
    moduleNameCss() {
      let style = this.propsData.params.moduleNameCss;
      if (style?.fontNum) {
        style.fontSize = `${style.fontNum * 2}rpx`;
      }
      return style;
    },
    moduleMoreCss() {
      let style = this.propsData.params.moduleMoreCss;
      if (style?.fontNum) {
        style.fontSize = `${style.fontNum * 2}rpx`;
      }
      return style;
    },
    heaerBgCss() {
      if (!this.propsData.params?.headerBg) return "";
      let style = JSON.parse(JSON.stringify(this.propsData.params.headerBg));

      if (!style.useBackground) {
        return {
          background: "inherit",
        };
      }
      return style;
    },
  },
  mounted() {
    this.initProductData();
  },
  methods: {
    // 初始化商品数据
    initProductData() {
      let params = {
        page: this.page,
        limit: this.pageSize,
        product_type: 4,
      };
      this.getProducts(params);
    },
    // api获取商品数据
    async getProducts(params) {
      const res = await this.$allrequest.diy.getGoodsList(params);
      if (res.code == 0) {
        this.row_count = res.data.row_count;
        if (params.isLoadMore) {
          this.goodsList = [...this.goodsList, ...res.data.list];
        } else {
          this.goodsList = res.data.list;
        }
      }
    },
    // 点击添加购物车按钮回调
    clickBuyBtn(e) {
      let item = e.item;
      if (item.product_type != 0 && item.product_type != 4) return;
      let goods = Object.assign({}, item);
      this.goodsOfAdd = goods;
      setTimeout(() => {
        this.goodsOfAdd = {};
      }, 1);
    },
    // 跳转商品详情
    toGoodDetail(e) {
      if (!e) return;
      let id = e.id;
      uni.navigateTo({
        url: "/integral/integralStore/goods?id=" + id,
      });
    },
    scrollToEnd() {
      if (this.page * this.pageSize >= this.row_count) return;
      this.page++;
      let params = {
        page: this.page,
        limit: this.pageSize,
        product_type: 4,
        isLoadMore: true,
      };
      this.getProducts(params);
    },
    skipToLink() {
      let link = this.propsData.params.link;
      if (link) {
        this.$utils.diySkip(link);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.component-box {
  width: 100%;
  position: relative;
  .diy-product {
    width: 100%;
    .section-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      padding: 0 3.2vw;
      position: relative;

      .module-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .module-name {
          font-size: 4.267vw;
          font-weight: 600;
          color: #262626;
          margin-bottom: 0;
        }
        .more {
          display: flex;
          align-items: center;
          font-size: 3.2vw;
          font-weight: 400;
          color: #888888;
          margin-bottom: 0;
          line-height: 4.267vw;
          .iconfont {
            font-size: 2.267vw;
          }
        }
      }
    }
    .section-body {
      width: 100%;
      // padding-bottom: 3.2vw;
    }
  }
  .add-padding {
    padding-top: 3.2vw;
  }

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
